<%@ taglib uri="/WEB-INF/tld/c.tld" prefix="c" %>
<html>
<head>
<!--  <title>GEOPIPA</title> -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=pt-BR"></script>
<script type="text/javascript">
  var map;
  var marker = null;
  var infowindow = null;
  var placeMarkersField = "";
  var carregado = 0;
  
  function initialize() {
    var latlng = new google.maps.LatLng(-7.232604194138538, -35.8865647578125);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
    google.maps.event.addListener(map, 'click', function(event) {
        addPlaceMarker(event.latLng);
    });
    
    submitFormCallCaminhoes();
  }
  
  function placeMarker(location) {
      var clickedLocation = new google.maps.LatLng(location);
      if(!marker){
          marker = new google.maps.Marker({
            position: location, 
            map: map,
            clickable: true
          });
      }else{
          marker.setPosition(location);
      }
      attachMessage(location);
      map.setCenter(location);
  }
  
  function addPlaceMarker(location) {
      var clickedLocation = new google.maps.LatLng(location);
      
       marker = new google.maps.Marker({
            position: location, 
            map: map,
            clickable: true
          });
      
      attachMessage(location);
      placeMarkersField += "," + location.toString();
      document.getElementById("placeMarkers").value = placeMarkersField;
      //alert(placeMarkers);
  }
  
  function attachMessage(location) {
      var message = location.toString();
      if(!infowindow){
          infowindow = new google.maps.InfoWindow(
                  { content: message,
                    size: new google.maps.Size(50,50)
                  });
           google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
              }); 
      }else{
          infowindow.setContent(message);
      }
      
    }
  
  
  function submitFormCallCaminhoes(){
	    document.getElementById("formCallCaminhoes").submit();
  }
  
  function getPlaceMarkers(){
	  return placeMarkersField;
  }

</script>
</head>
<body onload="initialize()">
  <table style="width:100%; height:100%" border="1">
    <tr>
        <td style="width:20%; height:100%">
            <div id="map_control" style="width:100%; height:100%">
                <form id="formCallCaminhoes" action="http://localhost:8081/SIG/buscaCaminhoes.action">
                
                </form>
            
                <form action="http://localhost:8081/SIG/cadastrarRota.action" method="post">
                    <input type="hidden" id="listCaminhoes" name="listCaminhoes" value="${listCaminhoes}">
                    <select id="caminhoes">
                        
                        <c:forEach items="listCaminhoes">
                            <li>aaaaa</li>
                        </c:forEach>
                    </select>
                    <input type="hidden" id="placeMarkers" name="placeMarkers" value="getPlaceMarkers();">
                    <input type="submit" value="Confirmar">
                </form>
            
            </div>
        </td>
        <td style="width:70%; height:100%">
            <div id="map_canvas" style="width:100%; height:100%"></div>
        </td>
    </tr>
  </table>
</body>
</html>